<template>
  <!-- 顶部自定义导航栏 -->
  <JHeaderTitle
    title="辅助终端设备详情"
    :bgColor="header.bgColor"
    color="#fff"
    imgUrl="/static/iconImg/left-white.svg"
  />

  <JEquiCode
    bgImg="/static/equipmentImg/big-terminal.svg"
    icon="/pageWork/static/images/terminal-white.svg"
    :qrcAlias="terminalInfo.trmName"
    :qrcId="terminalInfo.trmNo"
    @editInfo="editInfo"
  />

  <!-- 信息板块 -->
  <JMainCard wrapPd="0 50rpx 30rpx " bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
    <JInput
      name="设备名称"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.trmName"
      align="flex-start"
      pd="15rpx 40rpx"
    />
    <JInput
      name="设备号"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.trmNo"
      pd="15rpx 40rpx"
    />
    <JInput name="设备类型" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
      <view class="ter-type">
        <image src="/static/equipmentImg/terminal-white.svg" />
        {{ terminalInfo.trmType == 1 ? "终端设备" : "扫码POS" }}
      </view>
    </JInput>
    <JInput
      name="布放位置"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.detailAddress"
      align="flex-start"
      pd="15rpx 40rpx"
    />
    <JInput name="经纬度" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
      <text style="color: #fff">{{ terminalInfo.lat + "/" + terminalInfo.lng }}</text>
    </JInput>

    <view class="line"></view>
    <JInput
      name="商户"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.mchName"
      pd="15rpx 40rpx"
    />
    <JInput
      name="商户号"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.mchNo"
      pd="15rpx 40rpx"
    />
    <JInput
      name="门店"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.storeName"
      pd="15rpx 40rpx"
    />
    <JInput
      name="门店ID"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.storeId"
      pd="15rpx 40rpx"
    />
    <JInput
      name="应用名称"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.appName"
      pd="15rpx 40rpx"
    />
    <JInput
      name="AppId"
      textColor="rgba(255, 255,255, 0.6)"
      :isBorder="true"
      size="30rpx"
      :right="terminalInfo.appId"
      pd="15rpx 40rpx"
    />
  </JMainCard>

  <!-- 信息板块 -->
  <JMainCard wrapPd="0 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
    <JInput name="是否默认" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
      <view class="default">
        <text>{{ terminalInfo.defaultFlag == 1 ? "是" : "否" }}</text>
        <switch
          v-if="terminalInfo.defaultFlag != 1"
          :checked="terminalInfo.defaultFlag"
          @change="stateChange($event, 'defaultFlag')"
          style="margin-left: 20rpx; transform: scale(1.2)"
          color="#BF80FF"
        />
        <view class="state" v-else></view>
      </view>
    </JInput>
    <JInput name="设备状态" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
      <view class="item-right dis-wrapper">
        <text style="margin-right: 10rpx; color: #fff">{{ terminalInfo.state == 1 ? "启用" : "禁用" }}</text>
        <switch
          :checked="terminalInfo.state"
          @change="stateChange($event, 'state')"
          style="margin-left: 20rpx; transform: scale(1.2)"
          color="#BF80FF"
        />
      </view>
    </JInput>
  </JMainCard>

  <view class="bind-title" style="margin-top: 50rpx" v-if="channelList.length > 0">报备管理</view>
  <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0" v-if="channelList.length > 0">
    <scroll-view class="scroll-list" :scroll-y="true">
      <view v-for="(item, index) in channelList" @tap="sendup(item)" class="channel-list" :key="index">
        <!-- :textColor="item.textColor"  -->
        <JLayout
          :bgColor="item.bgColor"
          :icon="item.icon"
          :ifName="item.ifName"
          :stateColor="item.stateColor"
          :stateText="item.stateText"
        />
      </view>
    </scroll-view>
  </JMainCard>

  <JButton
    pd="20rpx 50rpx 50rpx 50rpx"
    @HandleTouch="delTerminal"
    pdTop="0"
    color="#FF4D6A"
    bgColor="rgba(255, 255, 255, 0.85)"
    >删除终端</JButton
  >

  <!-- 通用二次弹窗组件 -->
  <jeepayConfirm ref="jeepayConfirmRef" />

  <!-- 渠道报备弹窗 -->
  <JPopup ref="JPopupRef">
    <JMainCard pd="0" wrapPd="0 30rpx" bgColor="transparent">
      <view class="pop-body">
        <view class="text">{{ sendText }}</view>

        <JLayout
          :bgColor="sendInfo.bgColor"
          :icon="sendInfo.icon"
          :ifName="sendInfo.ifName"
          :stateColor="sendInfo.stateColor"
          :stateText="sendInfo.stateText"
          leftColor="#333"
          :rightColor="sendInfo.state == 1 ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.6)'"
          :preBig="true"
          :isImg="false"
        />
      </view>

      <view class="filing" @tap="filing" :style="{ color: sendInfo.state == 1 ? '#7737FE' : '#FF4C6A' }">{{
        sendInfo.channelBindInfo?.state == 0
          ? "确认报备"
          : sendInfo.channelBindInfo?.state == 2
          ? "重新报备"
          : "确认注销"
      }}</view>
      {{ sendInfo.channelBindInfo?.state }}
    </JMainCard>

    <JButton pd="30rpx" bottom="50rpx" color="#303030" bgColor="rgba(255,255,255,0.8)" pdTop="0" @HandleTouch="cancel"
      >取消</JButton
    >
  </JPopup>
  <JDeletedTips ref="switchTips" @confirm="confirm" @cancel="cancelSwitchTips" />
</template>

<script setup>
import { onLoad, onPageScroll, onShow } from "@dcloudio/uni-app"
import { ref, reactive, nextTick, toRaw } from "vue"
import {
  $getMchTermChannelBindInfos,
  $mchTermChannelSendup,
  $delTerminal,
  $updateTerminal,
  $updateMchTermDefault,
  $terminalInfo,
} from "@/http/apiManager.js"
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull.vue"
import JPopup from "@/components/newComponents/JPopup/JPopup.vue"
import jeepayConfirm from "@/components/jeepayConfirm/jeepayConfirm.vue"
import JEquiCode from "@/components/newComponents/JEquipment/JEquiCode.vue" // 设备信息
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
import JEquipmentCode from "@/components/newComponents/JEquipment/JEquipmentCode.vue" // 设备信息
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue" // 卡片
import JInput from "@/components/newComponents/JInput/JInput.vue"
import JLine from "@/components/newComponents/JLine/JLine.vue"
import JScroll from "@/components/newComponents/JScroll/JScroll.vue"
import JButton from "@/components/newComponents/JButton/JButton.vue"
import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
import JLayout from "@/components/newComponents/JLayout/JLayout.vue"
import JDeletedTips from "@/components/newComponents/JDeletedTips/JDeletedTips"
const terminalInfo = reactive({}) // 终端设备信息
let trmId = ref("") // 设备ID
const jeepayConfirmRef = ref() // 二次弹窗组件
const JPopupRef = ref() // 弹窗组件

onShow(() => {
  $terminalInfo(trmId.value).then(({ bizData }) => {
    bizData.appName ? bizData.appName : (bizData.appName = "默认应用")
    Object.assign(terminalInfo, bizData)
  })
})
const switchTips = ref(null)
onLoad((option) => {
  trmId.value = option.id // 得到设备ID
  // 请求可报备的渠道列表
  getChannelList()
})

let keys = null
// 更换状态
const stateChange = (e, key) => {
  keys = key
  let val = e.detail.value
  terminalInfo[keys] = Number(val)
  switchTips.value.open("确认修改吗？")
}
const confirm = () => {
  const data = {}
  data[keys] = terminalInfo[keys]
  keys = null
  $updateTerminal(terminalInfo.trmId, data).then(() => {
    uni.showToast({
      title: "修改成功",
      icon: "success",
    })
  })
}
const cancelSwitchTips = (val) => {
  if (!keys) return
  terminalInfo[keys] = Number(!terminalInfo[keys])
}
// 更改默认状态
const flagChange = (e) => {
  let val = Number(e.detail.value)
  terminalInfo.defaultFlag = val
  jeepayConfirmRef.value.comfirmOpen(
    () => {
      $updateMchTermDefault(terminalInfo.trmId, val).then((res) => {
        uni.showToast({ title: "更新成功", icon: "none" })
      })
    },
    "是否更改为默认设备",
    () => (terminalInfo.defaultFlag = Number(!val))
  )
}

// 请求可报备的渠道列表
let channelList = ref([])
const getChannelList = () => {
  $getMchTermChannelBindInfos(trmId.value).then(({ bizData }) => {
    bizData.forEach((item) => {
      if (item.channelBindInfo.state == 0 || !item.channelBindInfo?.state) {
        item.stateText = "未报备"
        item.stateColor = "rgba(0,0,0,.5)"
      } else if (item.channelBindInfo.state == 1) {
        item.stateText = "报备成功"
        item.stateColor = "#80f2ff"
      } else if (item.channelBindInfo.state == 2) {
        item.stateText = "报备失败"
        item.stateColor = "#ff8095"
      }
    })
    channelList.value = bizData
  })
}

// 报备
let sendText = ref("{}") // 报备信息
let sendInfo = reactive({}) // 要报的备渠道信息
const sendup = (info) => {
  Object.assign(sendInfo, info)
  info.channelBindInfo.state == 1
    ? (sendText.value = "是否注销当前设备所选渠道的报备？")
    : (sendText.value = "是否对当前设备所选渠道进行报备？")

  JPopupRef.value.open() // 开启弹窗
}

// 确认 and 取消报备
const filing = () => {
  JPopupRef.value.close() // 关闭弹窗
  $mchTermChannelSendup(trmId.value, sendInfo.ifCode, sendInfo.state).then((res) => {
    // 刷新报备列表
    getChannelList()
    uni.hideLoading()
    uni.showToast({ title: "操作成功", icon: "none" })
  })
}

const cancel = () => JPopupRef.value.close() // 关闭弹窗

// 跳转至编辑详情
const toEdit = () => uni.navigateTo({ url: "./addTerminal?id=" + trmId.value })

// 删除终端
const delTerminal = () => {
  jeepayConfirmRef.value.comfirmOpen(() => {
    $delTerminal(terminalInfo.trmId).then((res) => {
      uni.showToast({ title: "删除成功", icon: "none" })
    })
    uni.navigateBack({}) // 删除完毕返回上一页
  }, "是否进行删除")
}
const editInfo = () => {
  uni.navigateTo({
    url: "./addTerminalNext?trmId=" + terminalInfo.trmId,
  })
}
// 监听页面滚动 用于给自定义导航栏换背景色
const header = reactive({ bgColor: "transparent" })
onPageScroll((data) => {
  if (data.scrollTop > 20) {
    header.bgColor = "$primaryColor"
  } else {
    header.bgColor = "transparent"
  }
})
</script>
<style lang="scss">
page {
  background: $primaryColor;
}
</style>
<style scoped lang="scss">
.ter-type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-size: 30rpx;
  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }
}

// 中间的分割线
.line {
  border-top: 1rpx solid #6858ec;
  margin: 25rpx 40rpx;
}
.default {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text {
    margin-right: 10rpx;
    color: #fff;
  }
  .state {
    width: 42rpx;
    height: 42rpx;
    border-radius: 50%;
    background-color: #bf80ff;
  }
}

.scroll-list {
  max-height: 50vh;
}
.channel-list {
  box-sizing: border-box;
  padding: 0 40rpx;
  overflow: hidden;
}
.filing {
  text-align: center;
  font-size: 33rpx;
  line-height: 110rpx;
  height: 110rpx;
  border-top: 1rpx solid rgba($color: #000000, $alpha: 0.3);
  border-radius: 0 0 20rpx 20rpx;
  // background: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255);
}
.pop-body {
  padding: 30rpx;
  background-color: #fff;
  .text {
    font-size: 27rpx;
    color: #333;
    margin-bottom: 30rpx;
  }
}
</style>
